<template>
<nav v-if="userInfo === null" class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" href="/">conduit</a>
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <!-- Add "active" class when you're on that page" -->
        <RouterLink :to="{name:'home'}" class="nav-link active">Home</RouterLink>
      </li>
      <li class="nav-item">
        <RouterLink :to="{name:'login'}" class="nav-link">Sign in</RouterLink>
      </li>
      <li class="nav-item">
        <RouterLink :to="{name:'register'}" class="nav-link" >Sign up</RouterLink>
      </li>
    </ul>
  </div>
</nav>

<nav v-else class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" href="/">conduit</a>
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <!-- Add "active" class when you're on that page" -->
        <RouterLink :to="{name:'home'}" class="nav-link active">Home</RouterLink>
      </li>
      <li class="nav-item">
        <RouterLink class="nav-link" :to="{name:'createAricle'}"> <i class="ion-compose"></i>&nbsp;New Article </RouterLink>
      </li>
      <li class="nav-item">
        <RouterLink class="nav-link" :to="{name:'setting'}"> <i class="ion-gear-a"></i>&nbsp;Settings </RouterLink>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/profile/eric-simons">
          <img :src="userInfo.image" class="user-pic" />
          {{userInfo.username}}
        </a>
      </li>
    </ul>
  </div>
</nav>

</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'

const store = useUserStore();
let { userInfo } = storeToRefs(store)

</script>
<style scoped>
</style>
